
<template>
    <div class="canvas" :style="st">
        <!-- 路径站点图层 -->
        <canvas ref="canv" :style="st" id="canvas" width="1500" height="500"
            style="border:none;width:100%;height:100%"></canvas>
        <!-- 机器人图层 -->
        <canvas ref="canvasCar" :style="st" id="canvasCar" width="1500" height="500"
            style="border:none;width:100%;height:100%"></canvas>
    </div>
</template>
<script setup>
import mapData from "../../assets/0724.json";
import { ref, onMounted } from "vue";
const canv = ref(null); // 创建一个 ref 用于存储 canvas 元素
let m = 100 // 缩放倍数
onMounted(() => {
    canv.value = document.getElementById('canvas');
    console.log(canv.value)
    Simple()
})
// 创建站点＋路径
let Simple = function (factor) {
    var multiple = m  // 缩小倍数
    let canvas = canv.value
    let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
    // ctx.clearRect(0,0,canvas.width, canvas.height)
    // 清空画布      
    canvas.width = canvas.width
    // 画布中心点
    ctx.translate(700, 150);
    // 放大缩小
    // ctx.scale(factor, factor);
    // 反转坐标轴
    ctx.scale(1, -1)
    ctx.fillStyle = "red"; /* 填充颜色 */
    // ctx.fillRect(0,0, 10, 10);/* 4个参数分别是 x y 水平方向和垂直方向,是从左顶点(0, 0)开始的, w h 是绘制的矩形的宽和高了 */
    // 创建位置 
    for (let i in mapData.Sites) {
        ctx.fillRect(mapData.Sites[i].x / multiple - 5, mapData.Sites[i].y / multiple - 5, 10, 10);
        // 添加描边
        ctx.strokeStyle = "#fff"; // 描边颜色
        ctx.lineWidth = 1; // 描边线宽
        ctx.strokeRect(mapData.Sites[i].x / multiple - 5, mapData.Sites[i].y / multiple - 5, 10, 10);
    }

    // 创建路径
    let arr = [];
    let x1, y1, x2, y2 = Number //坐标
    for (let [key, value] of Object.entries(mapData.Tracks)) {
        // arr.push(value.siteA)
        let arr2 = {
            siteA: value.siteA,
            siteB: value.siteB
        }
        arr.push(arr2)
    }
    for (let i in arr) {
        // 获取Sites 中对应A-B的id 的key
        for (let j in mapData.Sites) {
            // 起点 
            if (arr[i].siteA == mapData.Sites[j].id) {
                x1 = mapData.Sites[j].x / multiple
                y1 = mapData.Sites[j].y / multiple
            }
        }
        for (let j in mapData.Sites) {
            // 终点 
            if (arr[i].siteB == mapData.Sites[j].id) {
                x2 = mapData.Sites[j].x / multiple
                y2 = mapData.Sites[j].y / multiple
            }
        }
        // 绘制路径
        ctx.beginPath(); //新建一条path
        ctx.moveTo(x1, y1); //把画笔移动到指定的坐标
        ctx.lineTo(x2, y2);  //绘制一条从当前位置到指定坐标的直线.
        ctx.lineWidth = 3; // 描边线宽
        //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
        // ctx.closePath(); 
        // 路径颜色
        ctx.strokeStyle = "#555";
        ctx.stroke(); //绘制路径。
    }
}
// 创建机器人图层  //需要更改代码下面是vue2的写法
let carIcon = async function () {
    var carxy = []
    // 获取小车
    let data = { reqCode: 1 }
    await getAllAgvInfoApi(data).then((res) => {
        for (let i in res.data) {
            carxy.push(res.data[i])
        }
    })

    let canvas = this.$refs.canvasCar
    let ctx = canvas.getContext('2d'); /* 创建 context 对象 */
    // 清空画布
    canvas.width = canvas.width
    // 画布中心点
    ctx.translate(700, 150);
    // 反转坐标轴
    ctx.scale(1, -1)
    // 获取小车位置
    for (let i in carxy) {
        // 旋转
        ctx.save()
        ctx.translate(carxy[i].x / this.m - 10, carxy[i].y / this.m - 10)
        // ctx.rotate((carxy[i].th - 90) * Math.PI / 180)
        // 绘制文字
        ctx.scale(1, -1)
        ctx.fillStyle = '#222'
        ctx.font = ' bold 15px 微软雅黑'
        ctx.fillText(carxy[i].name, -15, 15)
        ctx.scale(1, -1)
        // 绘制正方形4
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(20, 0);
        ctx.lineTo(20, 20);
        ctx.lineTo(0, 20);
        ctx.closePath();
        ctx.fillStyle = "royalblue";
        ctx.fill();

        // 恢复坐标轴
        ctx.restore()
    }
}
</script>

<style scoped></style>
